<!-- 展示修改记录详情组件 -->
<template>
    <div class="record-wrapper">
        <div v-if="noData" class="no-data-show">
            <no-data size="200px"></no-data>
        </div>
        <!-- 列表数据展示 -->
        <div class="record-show" v-else>
            <!-- 详情数据展示 -->
            <div class="record-detail">
                <div class="content">
                    <h2 class="record-title" v-text="record.modifyDesc.title"></h2>
                </div>
                <div class="info">
                    <p v-text="record.modifyDesc.content"></p>
                </div>
                <div class="before-data">
                    <el-form class="" :model="record">
                        <div class="param-desc color-red">修改前接口的入参数据：</div>
                        <el-form-item>
                            <el-input readonly :value="JSON.stringify(record.oldInParams, null, 2)" type="textarea" class="record-param" :rows="rows" resize="none"></el-input>
                            <el-input readonly :value="JSON.stringify(record.oldDescInParams, null, 2)" type="textarea" class="record-param" :rows="rows" resize="none"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="now-data">
                    <el-form class="" :model="record">
                        <div class="param-desc">修改后接口的入参数据：</div>
                        <el-form-item>
                            <el-input readonly :value="JSON.stringify(record.newInParams, null, 2)" type="textarea" class="record-param" :rows="rows" resize="none"></el-input>
                            <el-input readonly :value="JSON.stringify(record.newDescInParams, null, 2)" type="textarea" class="record-param" :rows="rows" resize="none"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <!-- 出参数据展示 -->
                <div class="before-data">
                    <el-form class="" :model="record">
                        <div class="param-desc color-red">修改前接口的出参数据：</div>
                        <el-form-item>
                            <el-input readonly :value="JSON.stringify(record.oldResultOutParams, null, 2)" type="textarea" class="record-param" :rows="rows" resize="none"></el-input>
                            <el-input readonly :value="JSON.stringify(record.oldDescInParams, null, 2)" type="textarea" class="record-param" :rows="rows" resize="none"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="now-data">
                    <el-form class="" :model="record">
                        <div class="param-desc">修改后接口的出参数据：</div>
                        <el-form-item>
                            <el-input readonly :value="JSON.stringify(record.newResultOutParams, null, 2)" type="textarea" class="record-param" :rows="rows" resize="none"></el-input>
                            <el-input readonly :value="JSON.stringify(record.newDescOutParams, null, 2)" type="textarea" class="record-param" :rows="rows" resize="none"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { request } from "@/js/_x/utils/request";
import { format } from "@/js/_x/utils/date";
import { mapState } from 'vuex'
import NoData from "../../../common/noData"
const defaultRecord = {
    modifyDesc: {}
}
export default {
    name: "RecordDetail",
    components: {
        NoData
    },
    computed: {
        ...mapState({
            currentProject: state => state.aside.currentProject,
            currentIntf: state => state.aside.currentIntf
        })
    },
    watch: {
        uid: function () {
            this.getRecordDetail()
        }
    },
    mounted () {
        this.getRecordDetail()
    },
    props: ["uid"],
    data () {
        return {
            rows: 14,
            noData: true,
            record: this.generateRecord(),
            records: []
        };
    },
    methods: {
        format,
        // 获取修改记录详情数据
        getRecordDetail () {
            let params = {
                projectName: this.currentProject,
                id: this.currentIntf.id,
                uid: this.uid
            }
            // 发起请求
            request("api/interface/node/get_history_record_detail", params, resp => {
                if (resp.result && resp.data) {
                    this.record = resp.data
                    this.noData = false
                    // 显示详情数据
                } else {
                    this.noData = true
                    this.record = this.generateRecord()
                    this.$message({ type: "error", message: `${resp.message},获取数据失败!` })
                }
            }).catch(error => {
                this.noData = true
                this.record = this.generateRecord()
                console.log(error);
                this.$message({ type: "error", message: "后台异常,获取数据失败!" })
            })
        },
        /* 生成初始化的record对象-重置record */
        generateRecord () {
            return JSON.parse(JSON.stringify(defaultRecord))
        },
        /* 重新获取列表数据 */
        resetDate () {
            // 获取数据
            this.getRecordDetail()
            // 重置详情框数据
        }
    }
};
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/mixin.scss";
@import "~@/assets/styles/home/content/recordDetail.scss";
</style>
